<template>
  <div class="dbxxManage">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="代表姓名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入角色名称"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="届次选择" prop="seId">
        <el-select
          v-model="queryParams.seId"
          placeholder="请选择所在届次"
          style="width: 100%"
          @change="replacePerChange($event)"
        >
          <el-option
            v-for="dict in sessionList"
            :key="dict.seId"
            :label="dict.label"
            :value="dict.seId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="代表团" prop="deId">
        <el-select
          v-model="queryParams.deId"
          placeholder="请选择所在代表团"
          style="width: 100%"
        >
          <el-option
            v-for="dict in delegationList"
            :key="dict.deId"
            :label="dict.name"
            :value="dict.deId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['dbxx:dbxxManage:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['dbxx:dbxxManage:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['dbxx:dbxxManage:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['dbxx:dbxxManage:export']"
          >导出</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="roleList"
      border
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="代表姓名" prop="userName" align="center" />
      <el-table-column
        label="代表证号"
        prop="num"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        label="性别"
        prop="sex"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
        </template>
      </el-table-column>
      <el-table-column label="民族" prop="nationality" align="center">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.nationality"
            :value="scope.row.nationality"
          />
        </template>
      </el-table-column>
      <el-table-column label="代表团" prop="de_id" align="center">
        <template slot-scope="scope">
          {{ scope.row.delegation | delegation(delegationList) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleSkip(scope.row)"
            v-hasPermi="['dbxx:dbxxManage:info']"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['dbxx:dbxxManage:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['dbxx:dbxxManage:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      @close="cancel"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="loginNum">
              <template slot="label">
                <span>账号</span>
                <el-tooltip
                  popper-class="packageDownLoad-tooltip"
                  effect="dark"
                  content="填写系统登陆账号，建议使用姓名全拼或手机号作为账号，初始密码为'123456"
                  placement="bottom"
                >
                  <i class="el-icon-s-comment"></i>
                </el-tooltip>
              </template>

              <el-input v-model="form.loginNum" placeholder="请输入账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex">
                <el-radio
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出生年月" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择出生年月"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="民族" prop="nationality">
              <el-select
                v-model="form.nationality"
                placeholder="请选择民族"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.nationality"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value + ''"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="籍贯" prop="address">
              <el-input v-model="form.address" placeholder="请输入籍贯" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="职位类型" prop="postType">
              <el-select
                v-model="form.postType"
                placeholder="请选择职位类型"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.sys_post_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="党派" prop="party">
              <el-select
                v-model="form.party"
                placeholder="请选择党派"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.sys_party_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历" prop="qualification">
              <el-select
                v-model="form.qualification"
                placeholder="请选择学历"
                style="width: 100%"
              >
                <el-option
                  v-for="dict in dict.type.sys_education_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代表证号" prop="num">
              <el-input v-model="form.num" placeholder="请输入代表证号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参加工作时间" prop="firstTime">
              <el-date-picker
                v-model="form.firstTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择参加工作时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选举时间" prop="startTime">
              <el-date-picker
                v-model="form.startTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择选举时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终止时间" prop="endTime">
              <el-date-picker
                v-model="form.endTime"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择终止时间"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在届次" prop="se_id">
              <el-select
                v-model="form.se_id"
                placeholder="请选择所在届次"
                style="width: 100%"
                @change="replacePerChange($event)"
              >
                <el-option
                  v-for="dict in sessionList"
                  :key="dict.seId"
                  :label="dict.label"
                  :value="dict.seId * 1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在代表团" prop="de_id">
              <el-select
                v-model="form.de_id"
                placeholder="请选择所在代表团"
                style="width: 100%"
                @change="replacePerChange($event)"
              >
                <el-option
                  v-for="dict in delegationList"
                  :key="dict.deId"
                  :label="dict.name"
                  :value="dict.deId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属联络站" prop="csId">
              <el-select
                v-model="form.csId"
                placeholder="请选择所属联络站"
                style="width: 100%"
                @change="replacePerChange($event)"
              >
                <el-option
                  v-for="dict in csList"
                  :key="dict.csId"
                  :label="dict.csName"
                  :value="dict.csId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代表层级" prop="levelIds">
              <el-select
                v-model="form.levelIds"
                multiple
                placeholder="请选择"
                style="width: 100%"
                @change="replacePerChange($event)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="Number(item.value)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作单位及职务" prop="post">
              <el-input
                v-model="form.post"
                placeholder="请输入工作单位及职务"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否常务委员会委员" prop="isCommittee">
              <el-radio-group v-model="form.isCommittee">
                <el-radio
                  v-for="dict in dict.type.sys_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="家庭住址" prop="homeAddress">
              <el-input
                v-model="form.homeAddress"
                placeholder="请输入家庭住址"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="办公电话" prop="workPhone">
              <el-input v-model="form.workPhone" placeholder="请输入办公电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="移动电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入移动电话" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证件照上传" prop="avatar">
              <imageUpload
                ref="imageUpload"
                v-model="form.avatar"
                :uploadUrl="uploadUrl"
                @getAvatar="getAvatar"
              ></imageUpload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="人员变动" :visible.sync="variationVisible" width="30%">
      <el-row type="flex" class="row-bg" justify="center">
        <el-radio-group v-model="radio">
          <el-radio :label="3">连任</el-radio>
          <el-radio :label="6">调入</el-radio>
          <el-radio :label="9">调出</el-radio>
        </el-radio-group>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="variationVisible = false">取 消</el-button>
        <el-button type="primary" @click="variationVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import imageUpload from "@/components/ImageUpload";
import { addSessionList } from "@/api/dbxx/dbxxLevel/index";
import { addDelegationList } from "@/api/dbxx/dbxxgroup/index";
import { addLianLuoList } from "@/api/dbxx/lianLuo/index";
import {
  addManage,
  addManageList,
  updateManageList,
  getManageItem,
  deleteManage,
} from "@/api/dbxx/dbxxManage";
import mixin from "../../jylz/mixins/index.js";
export default {
  name: "Manage",
  dicts: [
    "sys_yes_no",
    "nationality",
    "sys_user_sex",
    "sys_education_status",
    "sys_post_type",
    "sys_party_type",
  ],
  mixins: [mixin],
  components: {
    imageUpload,
  },
  data() {
    var valiNumber = (rule, value, callback) => {
      //包含小数的数字
      let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
      if (value && !reg.test(value)) {
        callback(new Error("请输入数字"));
      } else {
        callback();
      }
    };
    return {
      radio: "",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      names: [],
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      // 代表团列表
      delegationList: [],
      // 届次列表
      sessionList: [],
      //联络站
      csList: [],
      imageUrl: null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        team: undefined,
        isAsc: "desc",
        orderByColumn: "createTime",
        //  csId: 103,
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        loginNum: [
          { required: true, message: "账号不能为空", trigger: "blur" },
        ],
        workPhone: [
          { required: false, validator: valiNumber, trigger: "blur" },
        ],
        phone: [{ required: false, validator: valiNumber, trigger: "blur" }],
      },
      uploadUrl:
        process.env.VUE_APP_BASE_API + "/system/user/profile/avatar/local",
      variationVisible: false,
      options: [
        {
          value: "1",
          label: "全国人大代表",
        },
        {
          value: "2",
          label: "陕西省人大代表",
        },
        {
          value: "3",
          label: "延安市人大代表",
        },
        {
          value: "4",
          label: "志丹县人大代表",
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getMenuList();
  },
  filters: {
    delegation(value, delegationList) {
      return delegationList.filter((item) => item?.deId == value?.deId)[0]
        ?.name;
    },
  },
  methods: {
    /**
     * @description:
     * @return {*}
     */
    getMenuList() {
      addSessionList().then((response) => {
        this.sessionList = response.rows.map((item) => {
          return {
            label:
              item.area +
              `第${item.session}届人民代表大会` +
              `第${item.orderName}次会议` +
              `(${item.annual})`,
            seId: Number(item.seId),
          };
        });
      });
      addDelegationList().then((response) => {
        this.delegationList = response.rows;
      });
      addLianLuoList().then((response) => {
        this.csList = response.rows;
      });
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      addManageList(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.roleList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮（数据权限）
    cancelDataScope() {
      this.openDataScope = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userName: "",
        loginNum: "",
        sex: undefined,
        birthday: undefined,
        nationality: undefined,
        address: undefined,
        qualification: undefined,
        num: undefined,
        firstTime: undefined,
        startTime: undefined,
        endTime: undefined,
        se_id: undefined,
        de_id: undefined,
        post: undefined,
        isCommittee: undefined,
        homeAddress: undefined,
        workPhone: undefined,
        phone: undefined,
        avatar: undefined,
        remark: undefined,
        csId: undefined,
        postType: undefined,
        party: undefined,
        levelIds: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.names = selection.map((item) => item.userName);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    replacePerChange(val) {
      this.$forceUpdate();
    },
    /** 新增按钮操作 */
    handleAdd() {
      // this.reset();
      this.open = true;
      this.title = "新增代表信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const roleId = row.userId || this.ids;
      getManageItem(roleId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改代表信息";
        this.form.nationality = this.form.nationality + "";
        this.form.se_id = this.form.seId;
        this.form.de_id = this.form.deId;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.deId = this.form.de_id;
          this.form.seId = this.form.se_id;
          this.form.de_id = undefined;
          this.form.se_id = undefined;
          if (this.form.userId != undefined) {
            updateManageList(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$refs["imageUpload"].$refs["imageUpload"].clearFiles();
              this.open = false;
              this.getList();
              this.reset();
            });
          } else {
            addManage(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$refs["imageUpload"].$refs["imageUpload"].clearFiles();
              this.open = false;
              this.getList();
              this.reset();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userId = row.userId || this.ids;
      const name = row.userName || this.names;
      this.$modal
        .confirm('是否确认删除代表名称为"' + name + '"的数据项？')
        .then(function () {
          return deleteManage(userId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/system/db_user/export",
        { ...this.queryParams },
        `代表管理_${new Date().getTime()}.xlsx`
      );
    },
    handleVariation() {
      this.variationVisible = true;
    },
    getAvatar(avatar) {
      this.form.avatar = avatar;
    },
    handleSkip(row) {
      this.$router.push({
        path: "/dbxx/manageInfo/index/" + row.userId,
      });
    },
  },
};
</script>
<style lang="scss">
.dbxxManage {
  padding: 20px;
  height: 100%;
  overflow: auto;
}
.packageDownLoad-tooltip {
  max-width: 200px;
  background-color: #cd3333 !important;
  font-size: 12px;
  line-height: 1.5;
}

.packageDownLoad-tooltip[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #cd3333 !important;
}
</style>
